<template>
  <div>
    <div class="titletopXX">
      <van-nav-bar
        size="30"
        :title="title"
        left-arrow
        right-text=""
        :fixed="true"
        @click-left="onClickLeft"
      />
    </div>
    <div class="content">
      <div>
        <div class="item">
          <div class="item_info">
            <div style="font-size: 20px; font-weight: 600">
              {{ dataInfo.detailList[0].destination }}
            </div>
            <div style="margin: 10px 0">出行时间：{{ dataInfo.detailList[0].travelDate }}</div>
            <div
              v-for="item in dataInfo.detailList[0].convalesceAndEntouragesList"
              :key="item.id"
              class="item_list"
            >
              <div>
                <span>{{ item.employeeName }}/{{ item.gender }} 【{{ item.relationship }}】</span>
              </div>
              <div class="item_list_info">
                <span>手机号：</span> <span>{{ item.contactInfo }}</span>
              </div>
              <div class="item_list_info">
                <span>身份证号：</span> <span>{{ item.idCard }}</span>
              </div>
            </div>
            <van-divider
              :style="{
                borderColor: '#999',
                margin: '15px 0'
              }"
            ></van-divider>
            <van-steps
              direction="vertical"
              :active="active"
              :inactive-color="active == 1 ? '#999' : '#F56C6C'"
            >
              <van-step>
                <h3>申请人</h3>
                <p>{{ dataInfo.userName }}</p>
              </van-step>

              <van-step v-if="dataInfo.orderEvaluateApproval.score == 0">
                <h3>审批人</h3>
                <p>
                  {{ user.creator }} / 已驳回 审批意见：{{
                    dataInfo.orderEvaluateApproval.content || "无"
                  }}
                </p>
              </van-step>
              <van-step v-else>
                <h3>审批人</h3>
                <p>
                  {{ active == 1 ? user.creator + " / " : "" }}
                  {{ active == 1 ? "已完成" : "待审批" }} 审批意见：{{
                    dataInfo.orderEvaluateApproval.content || "无"
                  }}
                </p>
              </van-step>
            </van-steps>
            <van-button
              v-if="dataInfo.orderStatus == 0"
              block
              round
              color="#36c2a8"
              @click="onConfirm"
            >
              取消报名
            </van-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast, Dialog } from "vant"
import { getOrderDetailList } from "@/api/realAssets/icsharedstation/DD/index.js"
import { updateServiceOrderUser } from "@/api/realAssets/icsharedstation/manager.js"

export default {
  data() {
    return {
      title: "订单详情",
      active: 0,
      user: "",
      dataInfo: JSON.parse(decodeURIComponent(this.$route.query.DJJL))
    }
  },
  methods: {
    onClickLeft() {
      this.$router.back()
    },
    onConfirm() {
      Dialog.confirm({
        title: "取消行程",
        message: "确定取消该行程吗？"
      })
        .then(() => {
          updateServiceOrderUser({
            id: this.dataInfo.id
          }).then((res) => {
            if (res.resultMessage === "SUCCESS") {
              Toast.success("发送申请成功")
              this.$router.push({
                name: "icsharedstation_LYDJ_submitForm"
              })
            }
          })
        })
        .catch(() => {})
    }
  },
  mounted() {
    getOrderDetailList({
      orderNumber: this.dataInfo.orderNumber
    }).then((res) => {
      if (res.resultMessage == "SUCCESS") {
        this.user = res.data.orderEvaluateApproval
        console.log(res.data)
        if (res.data.orderEvaluateApprovalUser && res.data.orderEvaluateApproval.score == 1) {
          this.active = 1
        } else if (
          res.data.orderEvaluateApprovalUser &&
          res.data.orderEvaluateApproval.score == 0
        ) {
          this.active = 0
        } else {
          this.active = 1
        }
      }
    })
  }
}
</script>

<style lang="less">
.content {
  background-color: #f8fbff;
  min-height: 100vh;
  .item {
    width: 85%;
    margin: 20px auto;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    padding: 10px 15px;
    background-color: #fff;
    margin-bottom: 10px;
    font-size: 14px;
    min-height: 70vh;
    .item_info {
      .item_list {
        margin-bottom: 20px;
      }
      .item_list_info {
        display: flex;
        justify-content: space-between;
        padding: 5px 0;
      }
    }
  }
}
.titletopXX {
  height: 45px;
}
</style>
